import React from 'react';
import { Card } from 'antd';
import { ItemPanel, Item } from 'gg-editor';
import styles from './index.less';

const startPropsTemplate = {
  "StateMachine": {
    "Name": "",
    "Comment": "",
    "Version": "0.0.1"
  }
};
const serviceTaskPropsTemplate = {
  "ServiceName": "",
  "ServiceMethod": "",
  "Input": [
    {}
  ],
  "Output": {
  },
  "Status": {
  },
  "Retry": [
  ]
};
const scriptTaskPropsTemplate = {
  "ScriptType": "groovy",
  "ScriptContent": "",
  "Input": [
    {}
  ],
  "Output": {
  }
};
const compensationPropsTemplate = {
  "ServiceName": "",
  "ServiceMethod": "",
  "Input": [
    {}
  ],
  "Output": {
  },
  "Status": {
  },
  "Retry": [
  ]
};
const failPropsTemplate = {
  "ErrorCode": "",
  "Message": ""
};
const subStateMachinePropsTemplate = {
  "StateMachineName": "",
  "Input": [
    {}
  ],
  "Output": {
  }
}

const FlowItemPanel = () => {
  return (
    <ItemPanel className={styles.itemPanel}>
      <Card bordered={false}>
        <Item
          type="node"
          size="72*72"
          shape="flow-circle"
          model={{
            color: '#FA8C16',
            label: 'Start',
            stateId: 'Start',
            stateType: 'Start',
            stateProps: startPropsTemplate,
          }}
          src=""
        />
        <Item
          type="node"
          size="110*48"
          shape="flow-rect"
          model={{
            color: '#1890FF',
            label: 'ServiceTask',
            stateId: 'ServiceTask',
            stateType: 'ServiceTask',
            stateProps: serviceTaskPropsTemplate,
          }}
          src=""
        />
        <Item
          type="node"
          size="110*48"
          shape="flow-rect"
          model={{
            color: '#13C2C2',
            label: 'ScriptTask',
            stateId: 'ScriptTask',
            stateType: 'ScriptTask',
            stateProps: scriptTaskPropsTemplate,
          }}
          src=""
        />
        <Item
          type="node"
          size="80*72"
          shape="flow-rhombus"
          model={{
            color: '#13C2C2',
            label: 'Choice',
            stateId: 'Choice',
            stateType: 'Choice'
          }}
          src=""
        />
        <Item
          type="node"
          size="110*48"
          shape="flow-capsule"
          model={{
            color: '#722ED1',
            label: 'Compensation',
            stateId: 'Compensation',
            stateType: 'Compensation',
            stateProps: compensationPropsTemplate,
          }}
          src=""
        />
        <Item
          type="node"
          size="72*72"
          shape="flow-circle"
          model={{
            color: '#05A465',
            label: 'Succeed',
            stateId: 'Succeed',
            stateType: 'Succeed',
          }}
          src=""
        />
        <Item
          type="node"
          size="72*72"
          shape="flow-circle"
          model={{
            color: 'red',
            label: 'Fail',
            stateId: 'Fail',
            stateType: 'Fail',
            stateProps: failPropsTemplate,
          }}
          src=""
        />
        <Item
          type="node"
          size="39*39"
          shape="flow-circle"
          model={{
            color: 'red',
            label: 'Catch',
            stateId: 'Catch',
            stateType: 'Catch'
          }}
          src=""
        />
        <Item
          type="node"
          size="110*48"
          shape="flow-capsule"
          model={{
            color: 'red',
            label: 'Compensation\nTrigger',
            stateId: 'CompensationTrigger',
            stateType: 'CompensationTrigger',
          }}
          src=""
        />
        <Item
          type="node"
          size="110*48"
          shape="flow-rect"
          model={{
            color: '#FA8C16',
            label: 'SubStateMachine',
            stateId: 'SubStateMachine',
            stateType: 'SubStateMachine',
            stateProps: subStateMachinePropsTemplate,
          }}
          src=""
        />
      </Card>
    </ItemPanel>
  );
};

export default FlowItemPanel;
